<template>
	<view class="page">
	  <view class="group_1">
	  
	    <view class="image-wrapper_2">
	      <image src="/static/img/0522e42d66ec1761276ab4f265f044c1.png" class="image_5"></image>
	    </view>
	    <view class="box_2">
	      <view class="image-text_21">
	        <image src="/static/img/6d9f11bdba315097c0fa8a3cf6e5ea9e.png" class="label_1"></image>
	        <text lines="1" class="text-group_1">首页</text>
	      </view>
	      <view class="image-text_22">
	        <image src="/static/img/3868509b281e6cad1e9a3ce45dbb4ec5.png" class="label_2"></image>
	        <text lines="1" class="text-group_2">客服</text>
	      </view>
	      <view class="image-text_23">
	        <image src="/static/img/787dd80515853fc18616e21f82893784.png" class="image_6"></image>
	        <text lines="1" class="text-group_3">购物车</text>
	      </view>
	      
	    </view>
	    <view class="block_4">
	      <view class="box_4">
	        <view class="image-text_24">
	          <view class="text-group_4">
	            <text lines="1" decode="true" class="text_4">选择&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
	            <text lines="1" class="text_5">国鼎金荷</text>
	          </view>
	          <image src="/static/img/ed4e1b3ee2cefaf3c093c816fb067d0a.png" class="image_7"></image>
	        </view>
	        <text lines="1" class="text_6">运费：¥0.00～10.00</text>
	      </view>
	      <view class="box_5">
	        <text lines="1" class="text_7">聚易保</text>
	        <view class="image-text_25">
	          <view class="text-group_5">
	            <text lines="1" decode="true" class="text_8">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</text>
	            <text lines="1" class="text_9">进入店铺</text>
	          </view>
	          <image src="/static/img/669c4dca40269a1e6bb203ad9ba08927.png" class="image_8"></image>
	        </view>
			
	      </view>
	      <view class="box_6">
	        <view class="text-group_14">
	          <view class="text-wrapper_3">
	            <text lines="1" class="text_10">¥</text>
	            <text lines="1" class="text_11">69.</text>
	            <text lines="1" class="text_12">90</text>
	          </view>
	          <view class="text-wrapper_4">
	            <text lines="1" class="text_13">原价¥</text>
	            <text lines="1" class="text_14">89.</text>
	            <text lines="1" class="text_15">90</text>
	          </view>
			  
	        </view>
			
	        <view class="text-group_15">
	          <text lines="1" class="text_16">国鼎金荷</text>
	          <text lines="1" class="paragraph_1">五粮液集团全资子公司一瓶一码，防伪保证，买的翻滚，喝的舒心<br/>煤炭独立后列个，收藏，自己喝性价比高</text>
	        </view>
			
	      </view>
		  <view class="" style="display: flex;">
		  	<view class="text-wrapper_1">
		  	  <text lines="1" class="text_2" @click="goumai()">立即购买</text>
		  	</view>
		  	<view class="text-wrapper_2">
		  	  <text lines="1" class="text_3" @click="goumai()">加入购物车</text>
		  	</view>
		  </view>
	    </view>
		
	    <image src="/static/img/cdb730e87d7afb4cfa4e20b68a5cc055.png" class="image_9"></image>
		
	  </view>
	</view>
</template>

<script>
	export default {
		methods:{
			goumai(){
				uni.navigateTo({
					url:'/pages/sp-goumai/sp-goumai'
				})
			}
		}
	}
</script>

<style>
	.page {
	  position: relative;
	  width: 750rpx;
	  height: 1534rpx;
	  overflow: hidden;
	  display: flex;
	  flex-direction: column;
	}
	.group_1 {
	  position: relative;
	  width: 750rpx;
	  height: 1534rpx;
	  background: url(/static/img/4fbf7369a2ca77acee02bc248d037c67.png) 100% no-repeat;
	  background-size: 100% 100%;
	  display: flex;
	  flex-direction: column;
	}
	.box_1 {
	  background-color: rgba(241,241,241,1.000000);
	  position: relative;
	  width: 750rpx;
	  height: 148rpx;
	  display: flex;
	  flex-direction: column;
	}
	.image-wrapper_1 {
	  height: 40rpx;
	  margin-top: 9rpx;
	  display: flex;
	  flex-direction: column;
	  width: 749rpx;
	}
	.image_1 {
	  width: 722rpx;
	  height: 25rpx;
	  margin: 8rpx 0 0 13rpx;
	}
	.section_2 {
	  width: 624rpx;
	  height: 39rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 20rpx 0 40rpx 33rpx;
	}
	.image_2 {
	  width: 20rpx;
	  height: 35rpx;
	  margin-top: 4rpx;
	}
	.text_1 {
	  width: 148rpx;
	  height: 35rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 36rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin: 2rpx 0 0 250rpx;
	}
	.image_3 {
	  width: 1rpx;
	  height: 37rpx;
	  margin-left: 205rpx;
	}
	.image_4 {
	  position: absolute;
	  left: 596rpx;
	  top: 69rpx;
	  width: 121rpx;
	  height: 37rpx;
	}
	.block_2 {
	  border-radius: 32rpx;
	  position: absolute;
	  left: 569rpx;
	  top: 56rpx;
	  width: 174rpx;
	  height: 64rpx;
	  border: 1px solid rgba(51,51,51,1);
	  display: flex;
	  flex-direction: column;
	}
	.image-wrapper_2 {
	  background-color: rgba(247,247,247,1.000000);
	  height: 750rpx;
	  display: flex;
	  flex-direction: column;
	  width: 748rpx;
	}
	.image_5 {
	  width: 555rpx;
	  height: 547rpx;
	  margin: 53rpx 0 0 99rpx;
	}
	.box_2 {
	  background-color: rgba(255,255,255,1.000000);
	  position: relative;
	  width: 750rpx;
	  height: 112rpx;
	  margin-top: 524rpx;
	  flex-direction: row;
	  display: flex;
	}
	.image-text_21 {
	  width: 48rpx;
	  height: 78rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  margin: 19rpx 0 0 33rpx;
	}
	.label_1 {
	  width: 48rpx;
	  height: 48rpx;
	}
	.text-group_1 {
	  width: 46rpx;
	  height: 23rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 24rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 38rpx;
	  margin: 7rpx 0 0 1rpx;
	}
	.image-text_22 {
	  width: 47rpx;
	  height: 76rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  margin: 20rpx 0 0 48rpx;
	}
	.label_2 {
	  width: 47rpx;
	  height: 46rpx;
	}
	.text-group_2 {
	  width: 46rpx;
	  height: 23rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 24rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 38rpx;
	  margin-top: 7rpx;
	}
	.image-text_23 {
	  width: 70rpx;
	  height: 76rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  margin: 21rpx 0 0 39rpx;
	}
	.image_6 {
	  width: 56rpx;
	  height: 50rpx;
	  margin-left: 2rpx;
	}
	.text-group_3 {
	  width: 70rpx;
	  height: 23rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 24rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 38rpx;
	  margin-top: 3rpx;
	}
	.text-wrapper_1 {
	  background-color: rgba(25,83,247,1.000000);
	  border-radius: NaNrpx;
	  height: 75rpx;
	  display: flex;
	  flex-direction: column;
	  width: 198rpx;
	  margin: 20rpx 21rpx 0 246rpx;
	}
	.text_2 {
	  width: 105rpx;
	  height: 26rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1);
	  font-size: 26rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 29rpx;
	  margin: 24rpx 0 0 54rpx;
	}
	.text-wrapper_2 {
	  background-color: rgba(253,200,74,1.000000);
	  border-radius: NaNrpx;
	  height: 75rpx;
	  display: flex;
	  flex-direction: column;
	  width: 198rpx;
	  position: absolute;
	  left: 334rpx;
	  top: 20rpx;
	}
	.text_3 {
	  width: 133rpx;
	  height: 25rpx;
	  overflow-wrap: break-word;
	  color: rgba(255,255,255,1);
	  font-size: 26rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 29rpx;
	  margin: 24rpx 0 0 43rpx;
	}
	.block_4 {
	  position: absolute;
	  left: 0rpx;
	  top: 898rpx;
	  width: 750rpx;
	  height: 525rpx;
	  display: flex;
	  flex-direction: column;
	}
	.box_4 {
	  background-color: rgba(255,255,255,1.000000);
	  width: 710rpx;
	  height: 169rpx;
	  display: flex;
	  flex-direction: column;
	  margin: 223rpx 0 0 21rpx;
	}
	.image-text_24 {
	  width: 665rpx;
	  height: 29rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 35rpx 0 0 23rpx;
	}
	.text-group_4 {
	  width: 639rpx;
	  height: 29rpx;
	  overflow-wrap: break-word;
	  font-size: 0rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	}
	.text_4 {
	  width: 639rpx;
	  height: 29rpx;
	  overflow-wrap: break-word;
	  color: rgba(51, 51, 51, 1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	}
	.text_5 {
	  width: 639rpx;
	  height: 29rpx;
	  overflow-wrap: break-word;
	  color: rgba(51, 51, 51, 1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	}
	.image_7 {
	  width: 15rpx;
	  height: 25rpx;
	  margin-top: 2rpx;
	}
	.text_6 {
	  width: 249rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	  margin: 41rpx 0 36rpx 20rpx;
	}
	.box_5 {
	  background-color: rgba(255,255,255,1.000000);
	  border-radius: NaNrpx;
	  width: 710rpx;
	  height: 97rpx;
	  flex-direction: row;
	  display: flex;
	  margin: 10rpx 0 26rpx 21rpx;
	}
	.text_7 {
	  width: 87rpx;
	  height: 29rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 30rpx;
	  font-family: SourceHanSansCN-Heavy;
	  font-weight: 900;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	  margin: 30rpx 0 0 18rpx;
	}
	.image-text_25 {
	  width: 141rpx;
	  height: 28rpx;
	  flex-direction: row;
	  display: flex;
	  justify-content: space-between;
	  margin: 35rpx 22rpx 0 442rpx;
	}
	.text-group_5 {
	  width: 113rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  font-size: 0rpx;
	  font-family: SourceHanSansCN-Normal;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	}
	.text_8 {
	  width: 113rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(51, 51, 51, 1);
	  font-size: 30rpx;
	  font-family: SourceHanSansCN-Normal;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	}
	.text_9 {
	  width: 113rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(51, 51, 51, 1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 35rpx;
	}
	.image_8 {
	  width: 15rpx;
	  height: 25rpx;
	  margin-top: 1rpx;
	}
	.box_6 {
	  box-shadow: 0px -4px 51px 0px rgba(76,75,75,0.110000);
	  background-color: rgba(255,255,255,1.000000);
	  border-radius: NaNrpx;
	  position: absolute;
	  left: 20rpx;
	  top: -76rpx;
	  width: 710rpx;
	  height: 289rpx;
	  display: flex;
	  flex-direction: column;
	}
	.text-group_14 {
	  width: 123rpx;
	  height: 87rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  margin: 29rpx 0 0 20rpx;
	}
	.text-wrapper_3 {
	  width: 123rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  font-size: 0rpx;
	  font-family: PingFangSC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_10 {
	  width: 123rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(255, 22, 22, 1);
	  font-size: 24rpx;
	  font-family: PingFangSC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_11 {
	  width: 123rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(255, 22, 22, 1);
	  font-size: 48rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_12 {
	  width: 123rpx;
	  height: 40rpx;
	  overflow-wrap: break-word;
	  color: rgba(255, 22, 22, 1);
	  font-size: 36rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text-wrapper_4 {
	  width: 122rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  font-size: 0rpx;
	  font-family: PingFangSC-Regular;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	  margin-top: 19rpx;
	}
	.text_13 {
	  width: 122rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(153, 153, 153, 1);
	  font-size: 24rpx;
	  font-family: PingFangSC-Regular;
	  text-decoration: line-through;
	  font-weight: normal;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_14 {
	  width: 122rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(153, 153, 153, 1);
	  font-size: 30rpx;
	  font-family: STHeitiSC-Medium;
	  text-decoration: line-through;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text_15 {
	  width: 122rpx;
	  height: 28rpx;
	  overflow-wrap: break-word;
	  color: rgba(153, 153, 153, 1);
	  font-size: 24rpx;
	  font-family: STHeitiSC-Medium;
	  text-decoration: line-through;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 292rpx;
	}
	.text-group_15 {
	  width: 662rpx;
	  height: 108rpx;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-between;
	  margin: 26rpx 0 39rpx 17rpx;
	}
	.text_16 {
	  width: 122rpx;
	  height: 32rpx;
	  overflow-wrap: break-word;
	  color: rgba(51,51,51,1);
	  font-size: 32rpx;
	  font-family: STHeitiSC-Medium;
	  font-weight: 500;
	  text-align: left;
	  white-space: nowrap;
	  line-height: 50rpx;
	  margin-left: 3rpx;
	}
	.paragraph_1 {
	  width: 662rpx;
	  height: 58rpx;
	  overflow-wrap: break-word;
	  color: rgba(102,102,102,1);
	  font-size: 24rpx;
	  font-family: STHeitiSC-Light;
	  font-weight: 300;
	  text-align: left;
	  line-height: 35rpx;
	  margin-top: 18rpx;
	}
	.image_9 {
	  position: absolute;
	  left: 0rpx;
	  top: 153rpx;
	  width: 750rpx;
	  height: 750rpx;
	}
</style>